<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex align-stretch benben-position-layout flex editAddress_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex align-center justify-between flex-sub editAddress_fd0_0'>
					<view class='flex align-center editAddress_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">
						<text class='fu-iconfont2  editAddress_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex align-center'>
						<text class='editAddress_fd0_0_c1_c0' v-if="addressid==''">添加地址</text>
						<text class='editAddress_fd0_0_c1_c0' v-if="addressid!=''">编辑地址</text>
					</view>
					<view class='flex align-center justify-end editAddress_fd0_0_c0'>
						<!-- <text class='editAddress_fd0_0_c2_c0' v-if=" id!='' && appSystemIdentification!='Wechat'"
							@tap.stop="popupShow1686733151756=true">{{$t('删除')}}</text> -->
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---添加地址flex布局开始-->
			<view class="flex flex-direction align-stretch benben-flex-layout">
				<view class='flex flex-direction align-stretch editAddress_fd1_0'>
					<!-- <view class='flex flex-wrap align-center editAddress_fd1_0_c0'>
						<text class='editAddress_fd1_0_c0_c0'>{{$t('标签')}}</text>
						<benben-address-label class='editAddress_fd1_0_c0_c1' v-model="dataMessage.label_name">
						</benben-address-label>
					</view> -->
					<view class='flex align-center editAddress_fd1_0_c0'>
						<text class='editAddress_fd1_0_c0_c0'>{{$t('收货人')}}</text>
						<benben-input class='flex-sub editAddress_fd1_0_c1_c1' type="text" :placeholder="$t('收货人')"
							confirm-type="done" :maxlength="25" placeholder-style="color:#999;font-size:32rpx"
							@input="valueInspectFunc($event)" v-model="dataMessage.real_name" />
						<view class='flex flex-wrap align-center'>
							<benben-select-diy ref="showSelectPopup1689842219574" class-name='flex flex'
								:items.sync="sex_type" v-model="dataMessage.sex" :label.sync="sex_id"
								default-type="value" default-label="name" :allow-cancel='false' type="radio"
								:disabled='false'>
								<template v-for='(item,key0) in sex_type'>
									<view v-if="item.isSelected"
										class='flex align-center flex editAddress_fd1_0_c1_c2_c0_c0' :key="key0"
										@tap="$refs.showSelectPopup1689842219574.tapHandle(key0)">
										<image class='editAddress_fd1_0_c1_c2_c0_c0_c0' mode="aspectFit"
											:src='STATIC_URL+"3.png"'></image>
										<text class='editAddress_fd1_0_c1_c2_c0_c0_c1'>{{item.name}}</text>
									</view>
									<view v-else class='flex align-center flex editAddress_fd1_0_c1_c2_c0_c0'
										:key="key0" @tap="$refs.showSelectPopup1689842219574.tapHandle(key0)">
										<image class='editAddress_fd1_0_c1_c2_c0_c0_c0' mode="aspectFit"
											:src='STATIC_URL+"336.png"'></image>
										<text class='editAddress_fd1_0_c1_c2_c0_c1_c1'>{{item.name}}</text>
									</view>
								</template></benben-select-diy>
						</view>
					</view>
					<view class='flex flex-wrap align-center editAddress_fd1_0_c0'>
						<text class='editAddress_fd1_0_c0_c0'>{{$t('联系电话')}}</text>
						<benben-input class='flex-sub editAddress_fd1_0_c2_c1' type="number" :placeholder="$t('联系电话')"
							confirm-type="done" :maxlength="11"
							placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx"
							v-model="dataMessage.mobile" />
					</view>
					<view class='flex flex-direction flex-wrap align-stretch'>
						<view class='flex flex-wrap align-center editAddress_fd1_0_c3_c0'
							@tap.stop="pickerDiy1687776948467=true">
							<text class='editAddress_fd1_0_c0_c0'>{{$t('所在地区')}}</text>
							<benben-input class='flex-sub editAddress_fd1_0_c3_c0_c1' type="text"
								:placeholder="$t('请选择省市区县、乡镇')" confirm-type="done" :maxlength="-1" :disabled='true'
								placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx"
								v-model="dataMessage.address_code_area_str" />
							<image class='editAddress_fd1_0_c3_c0_c2' mode="aspectFit" :src='STATIC_URL+"400.png"'
								@tap.stop="pickerDiy1687776948467=true"></image>
						</view>
						<view class='flex flex-wrap editAddress_fd1_0_c3_c1'>
							<textarea class='flex editAddress_input_fd1_0_c3_c1' confirm-type="done"
								:placeholder="$t('请填写详细地址：如道路、门牌号、小区、楼栋号等')" :maxlength="240"
								placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx"
								v-model="dataMessage.detail" />

						</view>
					</view>
					<view class='flex flex-wrap align-center justify-between editAddress_fd1_0_c4'>
						<text class='editAddress_fd1_0_c4_c0'>{{$t('设为默认地址')}}</text>
						<benben-switch v-model="is_default" default-color='#dcdfe6' color='#A23C30'
							:disabled='false' :auto='true' size='96'>
						</benben-switch>
					</view>
				</view>
				<view class='flex flex-wrap align-center justify-center editAddress_fd1_1'>
					<button class='editAddress_fd1_1_c0' @tap="addAddressFunc()"
						v-if="addressid==''">{{$t('保存')}}</button>
						<button class='editAddress_fd1_1_c0'
						@tap="editAddressFunc()" v-if="addressid!=''">保存</button>
				</view>
			</view>

			<!---添加地址flex布局结束-->
			<benben-popup v-model="popupShow1686733151756" :mask="true" :mask-close-able="true" mode='center'>
				<!---基础弹窗flex布局开始-->
				<view class="flex flex-direction flex-wrap align-center editAddress_flex_2">
					<text class='editAddress_fd2_0'>{{$t('确认删除吗?')}}</text>
					<view class='flex align-center'>
						<button class='editAddress_fd2_1_c0'
							@tap.stop="popupShow1686733151756=false">{{$t('取消')}}</button>
						<button class='editAddress_fd2_1_c1' @tap.stop="deleteAddressFunc()">{{$t('确定')}}</button>
					</view>
				</view>

				<!---基础弹窗flex布局结束-->

			</benben-popup>
			<!--选择器开始 -->
			<benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="pickerDiy1687776948467"
				:label.sync='dataMessage.address_code_area_str' :province.sync='dataMessage.address_code_province'
				:city.sync='dataMessage.address_code_city' :area.sync='dataMessage.address_code_district' mode='region'
				:mask-show='true' :picker-height='88' :hide-area='false'>
				<template #picker-header>
					<view class='flex flex-wrap align-center justify-between editAddress_picker3_0'>
						<text @tap="$refs.benbenWritePickerCodepicker3.cancel()">{{$t('取消')}}</text>
						<text>{{$t('请选择所在地址')}}</text>
						<text class='editAddress_picker3_0_c2'
							@tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">{{$t('确定')}}</text>
					</view>
				</template>
			</benben-picker>
			<!--选择器结束 -->


		</view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"pickerDiy1687776948467": false,
				"popupShow1686733151756": false,
				"is_default": false,
				"address": "",
				"sex_type": [{
					"name": "先生",
					"value": "1",
					"image": ""
				}, {
					"name": "女士",
					"value": "2",
					"image": ""
				}],
				"sex_id": "1",
				"address_type": [{
					"name": "公司",
					"value": "1",
					"image": ""
				}, {
					"name": "家",
					"value": "2",
					"image": ""
				}],
				"address_id": "1",
				"dataMessage": {
					"aid": "",
					"mobile": "",
					"label_name": "",
					"sex": "",
					"province_id": "",
					"is_default": "",
					"province": "",
					"city": "",
					"city_id": "",
					"district": "",
					"district_id": "",
					"create_time": "",
					"real_name": "",
					"address_code": "",
					"detail": "",
					"address_code_province": "",
					"address_code_city": "",
					"address_code_district": "",
					"lng": "",
					"lat": "",
					"address_code_area": "",
					"address_code_area_str": ""
				},
				"real_name": "",
				"dataEssay": [],
				"dataType": [],
				"dataDetails": [],
				"mapMessage": {
					"name": "",
					"address": "",
					"latitude": "",
					"longitude": ""
				},
				"datamap": {
					"lng": "",
					"lat": "",
					"area": "",
					"province": "",
					"city": "",
					"district": ""
				},
				addressid: ""
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
			appSystemIdentification() {
				return this.$store.state.appSystemIdentification
			}
		},
		watch: {},
		onLoad(options) {
			let {
				addressid
			} = options
			if (addressid !== undefined) this.addressid = addressid
			if(this.addressid){
				this.getaddressMessageFunc()
			}
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//添加地址
			async addAddressFunc() {
				if (!validate(this.dataMessage.real_name, 'require')) {
					this.$message.info(global.i18n.t('请输入收货人名称'));
					return false;
				}
				var newName =
					/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;
				if (newName.test(this.dataMessage.real_name)) {
					this.$message.info('收货人不能包含特殊字符');
					return false;
				}
				if (!validate(this.dataMessage.sex, 'require')) {
					this.$message.info('请选择性别');
					return false;
				}
				if (!validate(this.dataMessage.mobile, 'require')) {
					this.$message.info(global.i18n.t('请输入联系电话'));
					return false;
				}
				if (!validate(this.dataMessage.mobile, 'phone')) {
					this.$message.info(global.i18n.t('请输入正确的手机号'));
					return false;
				}
				if (!validate(this.dataMessage.address_code_province, 'require')) {
					this.$message.info(global.i18n.t('请选择省市区'));
					return false;
				}
				if (!validate(this.dataMessage.detail, 'require')) {
					this.$message.info(global.i18n.t('请输入详细地址'));
					return false;
				}
				if (this.is_default === true) {
					this.dataMessage.is_default = '1';
				} else {
					this.dataMessage.is_default = '0';
				}
				//请求方法
				//数据验证

				let datadataEssay = await this.$api.dbPost(global.apiUrls.post637defdbd53ef, {
					real_name: this.dataMessage.real_name,
					mobile: this.dataMessage.mobile,
					detail: this.dataMessage.detail,
					sex: this.dataMessage.sex,
					label_name: this.dataMessage.label_name,
					is_default: this.dataMessage.is_default,
					province: this.dataMessage.address_code_province,
					city: this.dataMessage.address_code_city,
					district: this.dataMessage.address_code_district
				});
				if (!datadataEssay) return
				if (datadataEssay.data.code != 1) {
					this.$message.info(datadataEssay.data.msg);
					return
				}
				let infodataEssay = datadataEssay.data;
				this.dataEssay = infodataEssay.data

				uni.showToast({
					title: global.i18n.t('添加成功'),
					mask: true,
					icon: 'none',
					duration: 1500
				});
				setTimeout(() => {
					this.$urouter.navigateBack(1);
				}, 500)
			},
			
			//获取单个地址
			async getaddressMessageFunc() {
				this.dataMessage.sex = '1';
				if (this.addressid != '') {
					//请求方法
					//数据验证

					let datadataMessage = await this.$api.post(global.apiUrls.post636fd7826b3ee, {
						address_id: this.addressid
					});

					if (datadataMessage.data.code != 1) {
						this.$message.info(datadataMessage.data.msg);
						return
					}
					let infodataMessage = datadataMessage.data;
					this.dataMessage = infodataMessage.data

				}
				if (this.dataMessage.is_default == '1') {
					this.is_default = true;
				} else {
					this.is_default = false;
				}
			},
			
			//编辑地址
			async editAddressFunc() {
				if (!validate(this.dataMessage.real_name, 'require')) {
					this.$message.info(global.i18n.t('请输入收货人名称'));
					return false;
				}
				var newName =
					/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;
				if (newName.test(this.dataMessage.real_name)) {
					this.$message.info('收货人不能包含特殊字符');
					return false;
				}
				if (!validate(this.dataMessage.mobile, 'require')) {
					this.$message.info(global.i18n.t('请输入联系电话'));
					return false;
				}
				if (!validate(this.dataMessage.mobile, 'phone')) {
					this.$message.info(global.i18n.t('请输入正确的联系电话'));
					return false;
				}
				if (!validate(this.dataMessage.address_code_province, 'require')) {
					this.$message.info(global.i18n.t('请选择省市区'));
					return false;
				}
				if (!validate(this.dataMessage.detail, 'require')) {
					this.$message.info(global.i18n.t('请输入详细地址'));
					return false;
				}
				if (this.is_default === true) {
					this.dataMessage.is_default = '1';
				} else {
					this.dataMessage.is_default = '0';
				}
				//请求方法
				//数据验证

				let datadataDetails = await this.$api.dbPost(global.apiUrls.post637df1ea39d16, {
					address_id: this.addressid,
					real_name: this.dataMessage.real_name,
					mobile: this.dataMessage.mobile,
					detail: this.dataMessage.detail,
					sex: this.dataMessage.sex,
					label_name: this.dataMessage.label_name,
					is_default: this.dataMessage.is_default,
					province: this.dataMessage.address_code_province,
					city: this.dataMessage.address_code_city,
					district: this.dataMessage.address_code_district
				});
				if (!datadataDetails) return
				if (datadataDetails.data.code != 1) {
					this.$message.info(datadataDetails.data.msg);
					return
				}
				let infodataDetails = datadataDetails.data;
				this.dataDetails = infodataDetails.data

				this.$message.info('编辑成功');
				setTimeout(() => {
					this.$urouter.navigateBack(1);
				}, 500)
			},
			//地图选点
			async mapSelectFunc() {
				this.mapMessage = await this.syncUniApi('chooseLocation')
				//请求方法
				//数据验证

				let datadatamap = await this.$api.dbGet(global.apiUrls.post649e954010762, {
					lng: this.mapMessage.longitude,
					lat: this.mapMessage.latitude
				});
				if (!datadatamap) return
				if (datadatamap.data.code != 1) {
					this.$message.info(datadatamap.data.msg);
					return
				}
				let infodatamap = datadatamap.data;
				this.datamap = infodatamap.data

				this.dataMessage.detail = this.mapMessage.name;
				this.dataMessage.address_code_area_str = this.datamap.area;
				this.dataMessage.address_code_province = this.datamap.province;
				this.dataMessage.address_code_city = this.datamap.city;
				this.dataMessage.address_code_district = this.datamap.district;
			},
			//删除地址
			async deleteAddressFunc() {
				//请求方法
				//数据验证

				let data636f773e8d763 = await this.$api.dbPost(global.apiUrls.post636f773e8d763, {
					address_id: this.id
				});
				if (!data636f773e8d763) return
				if (data636f773e8d763.data.code != 1) {
					this.$message.info(data636f773e8d763.data.msg);
					return
				}



				this.popupShow1686733151756 = false;
				uni.showToast({
					title: global.i18n.t('删除成功'),
					mask: true,
					icon: 'none',
					duration: 1500
				});
				setTimeout(() => {
					this.$urouter.navigateBack(1);
				}, 500)
			},
			//输入监听事件
			valueInspectFunc(e) {
				var str = e
				var newZz =
					/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi;
				var nameZz = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/gi;
				if (newZz.test(str) || nameZz.test(str)) {
					this.$nextTick(() => {
						this.dataMessage.real_name = ''
					})
					uni.showToast({
						title: global.i18n.t('收货人不能包含特殊字符'),
						mask: true,
						icon: 'none',
						duration: 1500
					});
					return;
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto;
	}

	.editAddress_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.editAddress_fd0_0_c2_c0 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 45rpx;
	}

	.editAddress_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.editAddress_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.editAddress_fd0_0_c0 {
		width: 180rpx;
	}

	.editAddress_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}

	.editAddress_fd1_1_c0 {
		background:url("../../../static/images/401.png") no-repeat;
		background-size: 100%;
		font-size: 32rpx;
		color: var(--benbenFontColor3);
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: 500;
	}

	.editAddress_fd1_1 {
		width: 750rpx;
		position: fixed;
		left: 0rpx;
		bottom: calc(40rpx + var(--window-bottom));
	}

	.editAddress_fd1_0_c4_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.editAddress_fd1_0_c4 {
		padding: 32rpx 32rpx 32rpx 0rpx;
	}

	.editAddress_input_fd1_0_c3_c1 {
		width: 100%;
		height: 88rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
	}

	.editAddress_fd1_0_c3_c1 {
		background: rgba(246, 246, 246, 1);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 24rpx 42rpx 48rpx 24rpx;
		width: 680rpx;
	}

	.editAddress_fd1_0_c3_c0_c2 {
		width: 28rpx;
		height: 34rpx;
	}

	.editAddress_fd1_0_c3_c0_c1 {
		height: 45rpx;
		line-height: 45rpx;
		margin: 0rpx 20rpx 0rpx 0rpx;
	}

	.editAddress_fd1_0_c3_c0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 32rpx 32rpx 0rpx;
		margin: 0rpx 0rpx 32rpx 0rpx;
	}

	.editAddress_fd1_0_c2_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
	}

	.editAddress_fd1_0_c1_c2_c0_c1_c1 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #999999;
	}

	.editAddress_fd1_0_c1_c2_c0_c0_c1 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.editAddress_fd1_0_c1_c2_c0_c0_c0 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 12rpx 0rpx 0rpx;
	}

	.editAddress_fd1_0_c1_c2_c0_c0 {
		margin: 0rpx 0rpx 0rpx 40rpx;
	}

	.editAddress_fd1_0_c1_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		line-height: 32rpx;
	}

	.editAddress_fd1_0_c0_c1 {
		--cancel-bg: rgba(156, 159, 168, 1);
		--cancel-color: var(--benbenFontColor3);
		--confirm-color: var(--benbenFontColor3);
		--confirm-bg: var(--benbenbgColor7);
		--label-avtive-bg: rgba(29, 119, 255, 0.1);
		--label-avtive-color: var(--benbenFontColor4);
		--edit-bg: var(--benbenbgColor7);
		--edit-color: var(--benbenFontColor3);
	}

	.editAddress_fd1_0_c0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		width: 168rpx;
	}

	.editAddress_fd1_0_c0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 32rpx 32rpx 0rpx;
	}

	.editAddress_fd1_0 {
		background: var(--benbenbgColor1);
		padding: 0rpx 32rpx 0rpx 32rpx;
		background-size: 100% auto !important;
		margin: 0rpx 0rpx 120rpx 0rpx;
	}

	.editAddress_flex_2 {
		background: #fff;
		width: 540rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.editAddress_fd2_1_c1 {
		border-top: 1px solid #eee;
		border-left: 1px solid #eee;
		background: #fff;
		line-height: 94rpx;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		font-size: 32rpx;
		color: var(--benbenFontColor5);
		padding: 0rpx 99rpx 0rpx 101rpx;
		font-weight: 500;
	}

	.editAddress_fd2_1_c0 {
		border-top: 1px solid #eee;
		background: #fff;
		line-height: 94rpx;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		font-size: 32rpx;
		color: rgba(153, 153, 153, 1);
		padding: 0rpx 102rpx 0rpx 103rpx;
		font-weight: 400;
	}

	.editAddress_fd2_0 {
		line-height: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		margin: 91rpx 0rpx 88rpx 0rpx;
	}

	.editAddress_picker3_0_c2 {
		color:#A23C30;
	}

	.editAddress_picker3_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 100rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
		font-size: 32rpx;
	}
</style>